<template>
    <div>
        1.数值
        <p>数值：{{ aa }}</p>
        <hr>
        2.数组
        <p>数组:{{ shuzu }}</p>
        <p v-for="(item,index) in shuzu">{{ item }}  {{ index }}</p>
        <button v-on:click="fn2">数组更改</button>
        <hr>

        4.对象数组
        <p>显示：{{ arrobj }}</p>
        <p>
            <table class="table table-bordered">
              <tbody>
                <tr>
                    <td>ID</td>
                    <td>名称</td>
                    <td>岁数</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,index) in arrobj">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{item.age}}</td>
                    <td>
                        <input type="button" value="添加">
                        <input type="button" value="修改">
                        <input type="button" value="删除">

                    </td>
                </tr>
              </tbody>
            </table>
        </p>
    </div>

</template>

<script setup lang="ts">
  import { ref,reactive } from 'vue';
  //数值
  let aa =ref(100);
  //数组
  let shuzu=reactive([1,2,3,4,5]);
  //对象
  let obj=reactive({name:"张三",age:21})

  let arrobj=reactive([
     { id: "1", name: "张飞", age: 18, sex: "男" },
     { id: "2", name: "燕飞", age: 20, sex: "女" },
     { id: "3", name: "孔明", age: 35, sex: "男" },
     { id: "4", name: "貂蝉", age: 17, sex: "女" },
    { id: "5", name: "孔融", age: 23, sex: "男" }
  ]);


   //数组修改
   const fn2 =()=>{
        shuzu[1] = 1000;
    }


</script>

<style scoped>

</style>